import React, { useState } from 'react';
import { 
  Table, Tag, Space, Button, Input, 
  Tooltip, Switch, Radio, Divider 
} from 'antd';
import { 
  SearchOutlined, EditOutlined, 
  DeleteOutlined, UserOutlined 
} from '@ant-design/icons';
import '../../../styles/tutorial.css';

/**
 * Table 表格组件教程
 * 展示 Table 组件的核心特性和常见业务场景
 * 
 * 核心特性包括：
 * 1. 基础表格 - 最简单的表格展示
 * 2. 数据处理 - 排序、筛选、搜索
 * 3. 可选择表格 - 多选、单选、批量操作
 * 4. 可编辑表格 - 行内编辑、单元格编辑
 * 5. 扩展功能 - 展开行、树形数据、固定列
 */
const TableTutorial = () => {
  // 状态管理
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [loading, setLoading] = useState(false);
  const [tableSize, setTableSize] = useState('default');

  /**
   * 模拟数据源
   * 实际项目中通常从API获取
   */
  const dataSource = [
    {
      key: '1',
      name: '张三',
      age: 32,
      address: '北京市朝阳区',
      tags: ['开发', '设计'],
      status: 'active',
    },
    {
      key: '2',
      name: '李四',
      age: 42,
      address: '上海市浦东新区',
      tags: ['管理'],
      status: 'inactive',
    },
    // 更多数据...
  ];

  /**
   * 表格列定义
   * 包含了多种常见的列类型和功能
   */
  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      render: (text) => <a>{text}</a>,
      // 支持搜索
      filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
        <div style={{ padding: 8 }}>
          <Input
            placeholder="搜索姓名"
            value={selectedKeys[0]}
            onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
            onPressEnter={() => confirm()}
            style={{ width: 188, marginBottom: 8, display: 'block' }}
          />
          <Space>
            <Button
              type="primary"
              onClick={() => confirm()}
              icon={<SearchOutlined />}
              size="small"
            >
              搜索
            </Button>
            <Button onClick={() => clearFilters()} size="small">
              重置
            </Button>
          </Space>
        </div>
      ),
      filterIcon: (filtered) => (
        <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />
      ),
      onFilter: (value, record) =>
        record.name.toLowerCase().includes(value.toLowerCase()),
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
      sorter: (a, b) => a.age - b.age,
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '标签',
      key: 'tags',
      dataIndex: 'tags',
      render: (tags) => (
        <>
          {tags.map((tag) => (
            <Tag color={tag === '开发' ? 'green' : tag === '设计' ? 'blue' : 'orange'} key={tag}>
              {tag}
            </Tag>
          ))}
        </>
      ),
    },
    {
      title: '状态',
      key: 'status',
      dataIndex: 'status',
      render: (status) => (
        <Switch
          checkedChildren="活跃"
          unCheckedChildren="停用"
          defaultChecked={status === 'active'}
        />
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Tooltip title="编辑">
            <Button type="link" icon={<EditOutlined />} />
          </Tooltip>
          <Tooltip title="删除">
            <Button type="link" danger icon={<DeleteOutlined />} />
          </Tooltip>
        </Space>
      ),
    },
  ];

  /**
   * 表格选择配置
   */
  const rowSelection = {
    selectedRowKeys,
    onChange: (newSelectedRowKeys) => {
      console.log('selectedRowKeys changed: ', newSelectedRowKeys);
      setSelectedRowKeys(newSelectedRowKeys);
    },
  };

  /**
   * 展开行渲染函数
   */
  const expandedRowRender = (record) => {
    return (
      <p style={{ margin: 0 }}>
        {record.name} 的详细信息...
      </p>
    );
  };

  return (
    <div className="tutorial-container">
      <h1>Table 表格组件</h1>

      {/* 1. 基础功能区 */}
      <section className="example-section">
        <h2>1. 基础功能</h2>
        <div className="section-description">
          <p>表格的基础功能展示：</p>
          <ul>
            <li>基本的数据展示</li>
            <li>表格大小切换</li>
            <li>边框和斑马纹</li>
          </ul>
        </div>
        <Space style={{ marginBottom: 16 }}>
          <Radio.Group value={tableSize} onChange={(e) => setTableSize(e.target.value)}>
            <Radio.Button value="large">大</Radio.Button>
            <Radio.Button value="default">中</Radio.Button>
            <Radio.Button value="small">小</Radio.Button>
          </Radio.Group>
        </Space>
        <Table
          columns={columns}
          dataSource={dataSource}
          size={tableSize}
        />
      </section>

      {/* 2. 选择功能 */}
      <section className="example-section">
        <h2>2. 选择功能</h2>
        <div className="section-description">
          <p>表格的选择功能：</p>
          <ul>
            <li>多选功能</li>
            <li>选择状态控制</li>
            <li>批量操作</li>
          </ul>
        </div>
        <Space style={{ marginBottom: 16 }}>
          <Button type="primary" disabled={!selectedRowKeys.length}>
            批量操作 ({selectedRowKeys.length})
          </Button>
        </Space>
        <Table
          rowSelection={rowSelection}
          columns={columns}
          dataSource={dataSource}
        />
      </section>

      {/* 3. 扩展功能 */}
      <section className="example-section">
        <h2>3. 扩展功能</h2>
        <div className="section-description">
          <p>表格的高级特性：</p>
          <ul>
            <li>展开行</li>
            <li>自定义渲染</li>
            <li>固定列</li>
          </ul>
        </div>
        <Table
          columns={columns}
          expandable={{
            expandedRowRender,
            expandRowByClick: true,
          }}
          dataSource={dataSource}
        />
      </section>
    </div>
  );
};

export default TableTutorial; 